{extend name="index/base" /}

{block name='title'}Order Pay{/block}
{block name='content'}
{selfTag:multiDetail varName="orderModel" viewModel="\app\common\model\OrderModel" where='["status"=>1,"id"=>input("order_id")]' /}
<div class="category-body">
    <div class="container my-5">
        <div  class="checkout-wrap clearfix mb-2">


            <div   class="checoutInner">
                <div class="edit-address-wrap">

                    <h4 class="checkout-title">Order Info</h4>
                    <div class="info-card">
                        <div class="indexstyle-sc-5qhp9r-0 flACk">
                            <div class="info-item">
                                <h2 class="title">Order no</h2>
                                <p class="description">{$orderModel['no']}</p>
                            </div>
                            <div class="info-item">
                                <h2 class="title">Pay Money</h2>
                                <p class="description">{$orderModel['pay_money']}</p>
                            </div>
                        </div>
                    </div>

                    <h4 class="checkout-title">Payment</h4>

                    <div class="select-shipping-method ">
                        <div class="payment-method-list">
                            <label class="" :class="{'active':pay_way=='paypal'}" @click="handlePayWay('paypal')">
                                <input name="paymentName" type="radio" :checked="pay_way=='paypal'">
                                <div class="main-info">
                                    <h2>PayPal</h2>
                                    <div class="">
                                        <img alt="" src="/assets/images/paypal.png">
                                    </div>
                                </div>
                            </label>

                            <label class="" :class="{'active':pay_way=='asiabill'}" @click="handlePayWay('asiabill')">
                                <input name="paymentName" type="radio"  :checked="pay_way=='asiabill'">
                                <div class="main-info">
                                    <h2>Credit / Debit Card</h2>
                                    <div class="">
                                        <img alt="" src="/assets/images/paycard.png">
                                    </div>
                                </div>


                            </label>
                        </div>



                    </div>

                    <div class="checkoutBtnWrap js-btn-checkout">
                        <el-button :loading="submitLoading" href="javascript:;" class="checkoutBtn js_upMyorderBtn logsss_event_cl "  @click="handlePay">Safe Payment</el-button>
                    </div>

                </div>
            </div>


        </div>
    </div>


    <form :action="payOrderInfo_asiabill.form_url" ref="asiabillForm" method="post">
        <input name="merNo" type="hidden" :value="payOrderInfo_asiabill.merNo" />
        <input name="gatewayNo" type="hidden" :value="payOrderInfo_asiabill.gatewayNo" />
        <input name="orderNo" type="hidden" :value="payOrderInfo_asiabill.orderNo" />
        <input name="orderCurrency" type="hidden" :value="payOrderInfo_asiabill.orderCurrency" />
        <input name="orderAmount" type="hidden" :value="payOrderInfo_asiabill.orderAmount" />
        <input name="signInfo" type="hidden" :value="payOrderInfo_asiabill.signInfo" />
        <input name="returnUrl" type="hidden" :value="payOrderInfo_asiabill.returnUrl" />
        <input name="callbackUrl" type="hidden" :value="payOrderInfo_asiabill.callbackUrl" />
        <input name="firstName" type="hidden" :value="payOrderInfo_asiabill.firstName" />
        <input name="lastName" type="hidden" :value="payOrderInfo_asiabill.lastName" />
        <input name="email" type="hidden" :value="payOrderInfo_asiabill.email" />
        <input name="phone" type="hidden" :value="payOrderInfo_asiabill.phone" />
        <input name="paymentMethod" type="hidden" :value="payOrderInfo_asiabill.paymentMethod" />
        <input name="country" type="hidden" :value="payOrderInfo_asiabill.country" />
        <input name="state" type="hidden" :value="payOrderInfo_asiabill.state" />
        <input name="city" type="hidden" :value="payOrderInfo_asiabill.city" />
        <input name="address" type="hidden" :value="payOrderInfo_asiabill.address" />
        <input name="zip" type="hidden" :value="payOrderInfo_asiabill.zip" />
        <input name="goods_detail" type="hidden" :value='payOrderInfo_asiabill.goods_detail' />
    </form>
</div>
{/block}
{block name='script'}
<!-- Vendor scrits: js libraries and plugins-->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/tiny-slider.js"></script>
<script src="/assets/js/smooth-scroll.polyfills.min.js"></script>


<script src="/assets/js/swiper.min.js"></script>

<script>

    layui.extend({

    }).use([], function () {




        initVue({
            data: {
                pay_way:'paypal',
                order_id: "{:input('order_id')}",
                submitLoading:false,

                payOrderInfo_asiabill:{
                    'form_url':'',
                    'merNo':'',
                    'gatewayNo':'',
                    'orderNo':'',
                    'orderCurrency':'',
                    'orderAmount':'',
                    'signInfo':'',
                    'returnUrl':'',
                    'callbackUrl':'',
                    'firstName':'',
                    'lastName':'',
                    'email':'',
                    'phone':'',
                    'paymentMethod':'',
                    'country':'',
                    'state':'',
                    'city':'',
                    'address':'',
                    'zip':'',
                    'goods_detail':'',
                },
            },
            components: {
            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {


            },
            methods: {

                handlePayWay:function(pay_way){
                    this.pay_way = pay_way
                },
                handlePay:function(){
                    var that = this;
                    this.submitLoading = true
                    this.$network('order/payInfo', {
                        pay_way: this.pay_way,
                        order_id: this.order_id,
                    }).then(function(res){
                        that.$message.success(res.msg)
                        const data = res.data||{}
                        if(data.hasOwnProperty('url')){
                            that.submitLoading = false
                            location.href=data.url
                            return
                        }
                        if(that.pay_way==='asiabill'){
                            for (var key in that.payOrderInfo_asiabill){
                                that.payOrderInfo_asiabill[key] = data[key]??''
                            }
                            console.log('asiabillForm-submit',data,that.payOrderInfo_asiabill)
                            that.$nextTick(function(){
                                this.$refs['asiabillForm'].submit()
                                that.submitLoading = false
                            })
                            console.log('asiabillForm-submit')
                        }
                    }).catch(function(err){
                        that.submitLoading = false
                    })
                },
            }
        })


    })

</script>


{/block}